<template>
  <div class="Echarts">
    <div style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="6"><div id="main2" style="width: 600px;height:400px;"></div></el-col>
        <el-col :span="6"><div style="width: 700px;height:400px;"></div></el-col>
        <el-col :span="12"><div id="main" style="width: 600px;height:400px;"></div></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Echarts',
  methods:{
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title:{
          text:"2021年度××党派每月新增成员情况"
        },
        xAxis: {
          name:'月份'
        },
        yAxis: {
          name:'人数'
        },
        series: [{
          symbolSize: 20,
          data: [
            [1, 80],
            [2, 200],
            [3, 180],
            [4, 300],
            [5, 190],
            [6, 220],
            [7, 300],
            [8, 200],
          ],
          itemStyle: {
            normal: {
              label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                  color: 'black',
                  fontSize: 12
                }
              }
            }
          },
          type: 'scatter'
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myEcharts2(){
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById('main2'));

      // 指定图表的配置项和数据
      var option2 = {
        title:{
          text:"2010——2021年度××党派每年总成员情况"
        },
        xAxis: {
          name:'年份',
          scale:true
        },
        yAxis: {
          name:'人数',
          scale:true
        },
        series: [{
          symbolSize: 20,
          data: [
            [2010, 4000],
            [2011, 8000],
            [2012, 13000],
            [2013, 19000],
            [2014, 27000],
            [2015, 30000],
            [2016, 40000],
            [2017, 46000],
            [2018, 60000],
            [2019, 70000],
            [2020, 78000],
            [2021, 90000]
          ],
          itemStyle: {
            normal: {
              label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                  color: 'black',
                  fontSize: 12
                }
              }
            }
          },
          type: 'scatter'
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
    }
  },
  mounted() {
    this.myEcharts();
    this.myEcharts2();
  }
}
</script>

<style>

</style>
